import React, { useEffect } from "react";
import { Select } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { userList_a } from "../slice/userSlice";
import { PostStatus } from "../slice/postSlice";

declare global {
    interface Window {
        userListData: User_dao[];
    }
}
export interface User_dao {
    id: string;
    name: string;
}

interface Props {
    value?: string;
    onChange?: (value: string) => void;
}
/**
 * 帖子列表
 * */
const SelectUser = ({ value, onChange }: Props) => {
    const dispatch = useDispatch();
    const users: User_dao[] = useSelector((state: any) => {
        return state.users.list;
    });
    const status: PostStatus = useSelector((state: any) => {
        return state.users.status;
    });
    // const message: string | null = useSelector((state: any) => {
    //     return state.users.message;
    // });

    useEffect(() => {
        const updateData = () => {
            dispatch(userList_a());
        };
        updateData();
    }, [dispatch, users]);

    return (
        <Select
            style={{ width: "100%" }}
            value={value}
            onChange={(value) => {
                onChange && onChange(value);
            }}
            loading={status === PostStatus.loading}
        >
            {users.map((item) => {
                return (
                    <Select.Option key={item.id} value={item.id}>
                        {item.name}
                    </Select.Option>
                );
            })}
        </Select>
    );
};

export default SelectUser;
